<template>
    <div class="table-form-page">
        <div class="form-page-header">
            <div>
                <el-page-header @back="closeWindow" content="项目维护" />
            </div>
            <div>
                <el-button type="primary" @click="onSubmit">保存</el-button>
            </div>
        </div>
        <div class="form-content">
            <table class="table-class" border="0" cellspacing="0" cellpadding="0">
                <col class="label-col" />
                <col class="content-col" />
                <col class="label-col" />
                <col class="content-col" />
                <tr class="tr-class">
                    <td class="tab-class" colspan="4">项目信息</td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">项目名称</td>
                    <td class="td-class" colspan="3" style="height: 40px">
                        <el-input v-model="form.name" class="form-input-class" placeholder="请输入项目名称" />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">项目编号</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.code" class="form-input-class" placeholder="请输入项目编号" />
                    </td>
                    <td class="td-class label-class">业务类型</td>
                    <td class="td-class content-class">
                        <el-select v-model="form.businessType" placeholder="请选择" style="width: 100%">
                            <el-option
                                v-for="item in businessTypeOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">承担部门</td>
                    <td class="td-class content-class" colspan="3">
                        <el-input
                            v-model="form.departmentName"
                            class="form-input-class"
                            placeholder="请选择"
                            readonly
                            @click="chooseDepartment('1')"
                        />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">业主单位名称</td>
                    <td class="td-class content-class">
                        <el-input
                            v-model="form.clientCompanyName"
                            class="form-input-class"
                            placeholder="请输入业主单位名称"
                        />
                    </td>
                    <td class="td-class label-class">业主单位重要性</td>
                    <td class="td-class content-class">
                        <el-select v-model="form.importanceOfClient" class="form-input-class" placeholder="请选择">
                            <el-option
                                v-for="item in importanceOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">取得方式</td>
                    <td class="td-class content-class">
                        <el-select v-model="form.wayOfGet" class="form-input-class" placeholder="请选择">
                            <el-option
                                v-for="item in wayOfGetOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </td>
                    <td class="td-class label-class">是否需要签订合同</td>
                    <td class="td-class content-class">
                        <el-select v-model="form.needContract" class="form-input-class" placeholder="请选择">
                            <el-option
                                v-for="item in booleanOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">项目所在地</td>
                    <td class="td-class content-class">
                        <el-cascader
                            ref="areaRef"
                            v-model="form.addrCode"
                            :options="area"
                            style="width: 100%"
                            placeholder="请选择"
                        />
                    </td>
                    <td class="td-class label-class">详细地址</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.addrSpec" class="form-input-class" placeholder="请输入项目地址" />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">
                        坐标&emsp;(
                        <a href="javascript:void(0)" @click="getAxix">点击获取</a>
                        )
                    </td>
                    <td class="td-class content-class" colspan="3">
                        <el-input v-model="form.axis" class="form-input-class" placeholder="请输入坐标" />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">办事处</td>
                    <td class="td-class content-class">
                        <el-input
                            v-model="form.branchOffice"
                            class="form-input-class"
                            placeholder="点击选择"
                            readonly
                            @click="chooseOffice"
                        />
                    </td>
                    <td class="td-class label-class">客户经理</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.customerManager" class="form-input-class" placeholder="请选择办事处" />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">区域事业部</td>
                    <td class="td-class content-class">
                        <el-input
                            v-model="form.division"
                            class="form-input-class"
                            placeholder="请选择办事处"
                            readonly
                        />
                    </td>
                    <td class="td-class label-class">市场总监</td>
                    <td class="td-class content-class">
                        <el-input
                            v-model="form.marketingDirector"
                            class="form-input-class"
                            placeholder="请选择办事处"
                        />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">项目开始时间</td>
                    <td class="td-class content-class">
                        <el-date-picker
                            v-model="form.projectBeginDate"
                            type="date"
                            value-format="YYYY-MM-DD"
                            class="form-input-class"
                            placeholder="选择日期"
                        />
                    </td>
                    <td class="td-class label-class">项目结束时间</td>
                    <td class="td-class content-class">
                        <el-date-picker
                            v-model="form.projectCompleteDate"
                            type="date"
                            value-format="YYYY-MM-DD"
                            class="form-input-class"
                            placeholder="选择日期"
                        />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">合同额(元)</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.amountOfContract" class="form-input-class" placeholder="请输入合同额" />
                    </td>
                    <td class="td-class label-class">毛利润(元)</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.grossProfit" class="form-input-class" placeholder="请输入毛利润" />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">质量目标</td>
                    <td class="td-class content-class">
                        <el-select v-model="form.goalOfQuality" class="form-input-class" placeholder="请选择">
                            <el-option
                                v-for="item in qualityOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </td>
                    <td class="td-class label-class">项目层级</td>
                    <td class="td-class content-class">
                        <el-select v-model="form.projectLevel" class="form-input-class" placeholder="请选择">
                            <el-option
                                v-for="item in levelOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">经营计提基数</td>
                    <td class="td-class content-class">
                        <el-input
                            v-model="form.accrualRadix"
                            class="form-input-class"
                            placeholder="请输入经营计提基数"
                        />
                    </td>
                    <td class="td-class label-class">经营计提比例(%)</td>
                    <td class="td-class content-class">
                        <el-input
                            v-model="form.accrualRatio"
                            class="form-input-class"
                            placeholder="请输入经营计提比例"
                        />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">经营费(元)</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.feeOfOperation" class="form-input-class" placeholder="请输入经营费" />
                    </td>
                    <td class="td-class label-class">项目状态</td>
                    <td class="td-class content-class">
                        <el-select v-model="form.status" class="form-input-class" placeholder="请选择">
                            <el-option key="1" label="临时" value="TEMP"></el-option>
                            <el-option key="2" label="跟踪中" value="IN_TRACE"></el-option>
                            <el-option key="3" label="未投标" value="NOT_BID"></el-option>
                            <el-option key="4" label="待投标" value="IN_BID"></el-option>
                            <el-option key="5" label="未中标" value="BID_FAIL"></el-option>
                            <el-option key="6" label="已中标" value="BID_WIN"></el-option>
                            <el-option key="7" label="待立项" value="IN_PA"></el-option>
                            <el-option key="8" label="已立项" value="HAS_PA"></el-option>
                            <el-option key="9" label="已完成" value="DONE"></el-option>
                        </el-select>
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">项目负责人</td>
                    <td class="td-class content-class">
                        <el-input
                            v-model="form.projectCharge"
                            class="form-input-class"
                            placeholder="请输入项目负责人"
                        />
                    </td>
                    <td class="td-class label-class">项目主管/副总/主任工程师</td>
                    <td class="td-class content-class">
                        <el-input
                            v-model="form.projectSupervisor"
                            class="form-input-class"
                            placeholder="请输入项目主管/副总/主任工程师"
                        />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">主办部门</td>
                    <td class="td-class content-class">
                        <el-input
                            v-model="form.organizeDepartment"
                            class="form-input-class"
                            placeholder="请输入主办部门"
                            readonly
                            @click="chooseDepartment('2')"
                        />
                    </td>
                    <td class="td-class label-class">协办部门</td>
                    <td class="td-class content-class">
                        <el-input
                            v-model="form.assistedDeptartment"
                            class="form-input-class"
                            placeholder="请输入协办部门"
                            readonly
                            @click="chooseDepartment('3')"
                        />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">协办部门负责人</td>
                    <td class="td-class content-class">
                        <el-input
                            v-model="form.assistedCharge"
                            class="form-input-class"
                            placeholder="请输入协办部门负责人"
                        />
                    </td>
                    <td class="td-class label-class">协办部门负责人手机号</td>
                    <td class="td-class content-class">
                        <el-input
                            v-model="form.assistedChargePhone"
                            class="form-input-class"
                            placeholder="请输入协办部门负责人手机号"
                        />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">项目风险说明</td>
                    <td class="td-class" colspan="3" style="height: 40px">
                        <el-input
                            v-model="form.projectRisk"
                            type="textarea"
                            class="form-input-class"
                            :rows="5"
                            placeholder="请输入项目风险说明"
                        />
                    </td>
                </tr>
            </table>
        </div>

        <el-dialog
            width="400px"
            top="20vh"
            title="部门"
            v-model="showDepartment"
            :lock-scroll="true"
            :close-on-click-modal="false"
        >
            <div class="tree-dialog-content">
                <department-tree @select="departmentSelected"></department-tree>
            </div>
        </el-dialog>

        <el-dialog
            width="800px"
            top="10vh"
            title="办事处"
            v-model="showOfficeGridCpt"
            :lock-scroll="true"
            :close-on-click-modal="false"
        >
            <div class="dialog-content">
                <OfficeGridCpt :single="true" @select="officeSelected"></OfficeGridCpt>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import http from '@/http.js'
import DepartmentTree from '@/components/bas/DepartmentTree.vue'
import OfficeGridCpt from '@/components/pub/OfficeGridCpt.vue'
import area from '@/api/area.json'

const props = defineProps({
    id: {
        type: String,
        default: ''
    }
})

const emit = defineEmits(['close'])

const form = reactive({
    subcontractType: 0
})

const importanceOption = ref([
    {
        label: '一般',
        value: 0
    },
    {
        label: '重要',
        value: 1
    }
])

const wayOfGetOption = ref([
    {
        label: '投标',
        value: 0
    },
    {
        label: '委托',
        value: 1
    }
])

const booleanOption = ref([
    {
        label: '否',
        value: 0
    },
    {
        label: '是',
        value: 1
    }
])

const qualityOption = ref([
    {
        label: '精品项目',
        value: 0
    },
    {
        label: '优良项目',
        value: 1
    },
    {
        label: '合格项目',
        value: 2
    }
])

const levelOption = ref([
    {
        label: '所级',
        value: 0
    },
    {
        label: '事业部级',
        value: 1
    }
])

const businessTypeOption = ref([])

const areaRef = ref(null)

const showDepartment = ref(false)

const closeWindow = () => {
    emit('close')
}

const init = () => {
    loadOptions()
    if (props.id != '') {
        loadDatail()
    }
}

const loadOptions = () => {
    http.fetchForm({
        url: '/sys/dictionary/queryByGroups',
        method: 'get',
        data: {
            groupCodes: 'P-004-001'
        }
    }).then((res) => {
        businessTypeOption.value = res.data['P-004-001']
    })
}

const loadDatail = () => {
    http.fetchForm({
        url: '/pub/project/findById',
        method: 'get',
        data: {
            id: props.id
        }
    }).then((res) => {
        let data = res.data
        if (data.addrCode !== null && data.addrCode !== '') {
            data['addrCode'] = data.addrCode.split(',')
        }
        data['amountOfContract'] = data.amountOfContract == '' ? '' : data.amountOfContract / 100
        data['feeOfOperation'] = data.feeOfOperation == '' ? '' : data.feeOfOperation / 100
        data['grossProfit'] = data.grossProfit == '' ? '' : data.grossProfit / 100
        data['subcontractFee'] = data.subcontractFee == '' ? '' : data.subcontractFee / 100
        Object.assign(form, data)
    })
}

const onSubmit = () => {
    let params = JSON.parse(JSON.stringify(form))
    if (params.addrCode != undefined) {
        params['addrCode'] = params.addrCode.join(',')
        params['addrName'] = areaRef.value.getCheckedNodes()[0].text
    }
    params['amountOfContract'] = params.amountOfContract * 100
    params['feeOfOperation'] = params.feeOfOperation * 100
    params['grossProfit'] = params.grossProfit * 100
    params['subcontractFee'] = params.subcontractFee * 100
    http.fetchJson({
        url: '/pub/project/save',
        data: params
    }).then((res) => {
        ElNotification({
            title: '提示',
            message: '保存成功',
            type: 'success'
        })
        closeWindow()
    })
}

const getAxix = () => {
    window.open('https://lbs.amap.com/tools/picker', '_blank')
}

/**
 * 选择部门
 * 1:承担部门、2:主办部门、3:协办部门
 */
const departmentType = ref('')

const chooseDepartment = (type) => {
    departmentType.value = type
    showDepartment.value = true
}

const departmentSelected = (res) => {
    if (departmentType.value === '1') {
        form.departmentId = res.id
        form.departmentCode = res.code
        form.departmentName = res.label
    } else if (departmentType.value === '2') {
        form.organizeDepartment = res.label
    } else if (departmentType.value === '3') {
        form.assistedDeptartment = res.label
    }
    showDepartment.value = false
}

/**
 * 办事处选择
 */
const showOfficeGridCpt = ref(false)

const chooseOffice = () => {
    showOfficeGridCpt.value = true
}

const officeSelected = (res) => {
    form.branchOffice = res.name
    form.customerManager = res.customerManager
    form.division = res.division
    form.marketingDirector = res.marketingDirector
    showOfficeGridCpt.value = false
}

onMounted(() => {
    init()
})
</script>
<style scoped>
@import '@/assets/css/table-form.css';
</style>
